<template>
  <div>
    <Card dis-hover :bordered="false">
      <!-- <Row>
        <Col span="3">
        <List class="ivu-sidebar">
          <span v-for="item in sidebar" :key="item.id" @click="changeTab(item.address)">
            <ListItem :class="item.address === tabId ? 'ivu-active' : ''">{{ item.name }}</ListItem>
          </span>
        </List>
        </Col>
        <Col span="21">
        <component :is="tabId"></component>
        </Col>
      </Row> -->
      <Tabs type="card" v-model="munname" @on-click="changeTab">
        <TabPane name="name1" label="对话列表">
          <dialogs ref="dialogs" />
        </TabPane>
        <TabPane name="name2" label="对话文件">
          <dialogFile ref="dialogFile" />
        </TabPane>
      </Tabs>
    </Card>
  </div>
</template>
<script>
// import marketingReport from './marketingReport.vue'// 营销报表
import dialogFile from "./dialogFile.vue"; // 对话文件列表
// import consumption from './consumption.vue'// 消费列表
import dialogs from "./dialogs.vue"; // 对话列表
// import channelConfiguration from './channelConfiguration.vue'// 渠道配置

export default {
  name: "dialogList",
  components: {
    // marketingReport,
    dialogFile,
    // consumption,
    dialogs,
    // channelConfiguration
  },
  data() {
    return {
      // tabId: 'marketingReport',
      // sidebar: [
      //     { id: 4, name: '营销报表', address: 'marketingReport' },
      //     { id: 1, name: '对话列表', address: 'dialogs' },
      //     { id: 2, name: '对话文件列表', address: 'dialogFile' },
      //     { id: 3, name: '消费列表', address: 'consumption' },
      //     { id: 5, name: '渠道配置', address: 'channelConfiguration' }
      // ],
      munname: "name1",
    };
  },
  mounted() {
    this.$refs.dialogs.initial();
  },
  methods: {
    changeTab(e) {
      if (e == "name1") {
        this.$refs.dialogs.initial();
      } else {
        this.$refs.dialogFile.initial();
      }
    },
  },
};
</script>
<style>
.ivu-sidebar span {
  cursor: pointer;
}

.ivu-active {
  font-weight: bold;
  color: #55b6ec;
}
</style>
